import React, { useEffect, useRef, useState } from 'react'
import { Card, Col, Row, List, Avatar, Drawer } from 'antd';
import axios from 'axios'
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
// 表示把Echarts的所有东西都导入这个大模块中
import * as Echarts from 'echarts'
const { Meta } = Card;

export default function Home() {
    const barRef = useRef()
    const pieRef = useRef()
    const [visible, setVisible] = useState(false)
    const [pieChart, setpieChart] = useState(null)

    // const [viewList, setViewList] = useState([])
    // useEffect(() => {
    //     axios.get("/news?publishState=2&_expand=category&_sort=view&_order=desc&limit=6").then(res => {
    //         console.log(res.data)
    //         setViewList(res.data)
    //     })
    // }, [])


    useEffect(() => {

        axios.get("/news?publishState=2&_expand=category").then(res => {
            console.log(res.data);
        })

        var myChart = Echarts.init(barRef.current);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '新闻分类图示'
            },
            tooltip: {},
            legend: {
                data: ['数量']
            },
            xAxis: {
                data: ['时事新闻', '军事新闻', '科学技术', '世界新闻', '体育新闻', '全球时事'],
                axisLabel: {
                    rotate: "45",
                    interval: 0
                }
            },
            yAxis: {
                minInterval: 1
            },
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 在Echart中有这个resize方法就是拿来做响应式布局得到，直接调用的就好了
        // 要清楚的话就直接赋值为null 空就行
        window.onresize = () => {
            myChart.resize()
        }

    }, [])


    const renderPieview = () => {
        var myChart;
        // 这个判断是为了不被初始化太多次
        if (!pieChart) {
            myChart = Echarts.init(pieRef.current);
            setpieChart(myChart)
        } else {
            myChart = pieChart
        }

        var option;

        option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }

    // const { username, region, role: { roleName } } = JSON.parse(localStorage.getItem("token"))

    return (
        <div className="site-card-wrapper">
            <Row gutter={16}>
                <Col span={8}>
                    <Card title="用户最常浏览" bordered={false}>
                        <List
                            size="small"
                            // bordered
                            dataSource={"11111", "22222", "33333"}
                            renderItem={item => <List.Item>{item}</List.Item>}
                        />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="用户点赞最多" bordered={true}>
                        <List
                            size="small"
                            // bordered
                            dataSource={"11111", "22222", "33333"}
                            renderItem={item => <List.Item>{item}</List.Item>}
                        />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card
                        cover={
                            <img
                                alt="example"
                                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                            />
                        }
                        actions={[
                            <SettingOutlined key="setting" onClick={() => {
                                setTimeout(() => {
                                    setVisible(true)
                                    // init初始化
                                    renderPieview()
                                }, 0)
                            }} />,
                            <EditOutlined key="edit" />,
                            <EllipsisOutlined key="ellipsis" />,
                        ]}
                    >
                        <Meta
                            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                            title="Card title"
                            description="This is the description"
                        />
                    </Card>
                </Col>
            </Row>

            <Drawer width="500px" title="个人新闻分类" placement="right" closable={true} onClose={() => {
                setVisible(false)
            }} visible={visible}>
                <div ref={pieRef} style={{
                    width: "100%",
                    height: "300px",
                    marginTop: "30px"
                }}></div>
            </Drawer>

            <body>

                <div ref={barRef} style={{
                    width: "100%",
                    height: "300px",
                    marginTop: "30px"
                }}></div>
            </body>
        </div>
    )
}
